<template>
  <el-dialog v-if="visible" title="退单" :visible.sync="visible" width="600px" @closed="close">
    <div>
      <el-form ref="form" inline :model="query" :rules="formRules">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="客户名称:" label-width="90px">
              <el-input :value="currentRow.csmName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户电话:" label-width="90px">
              <el-input :value="currentRow.contactPhone" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地址:" label-width="90px">
              <el-input :value="currentRow.contactAddress" disabled style="width: 420px;" />
            </el-form-item>
          </el-col>
          <el-col v-if="type === 'repair'" :span="12">
            <el-form-item label="退单人:" prop="userName" label-width="90px">
              <el-input v-model="query.userName" />
            </el-form-item>
          </el-col>
          <el-col v-if="type === 'repair'" :span="12">
            <el-form-item label="退单日期:" prop="date" label-width="90px">
              <el-date-picker
                v-model="query.date"
                type="date"
                placeholder="选择日期"
                style="width: 160px;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="退单原因:" prop="remark" label-width="90px">
              <el-input
                v-model="query.remark"
                type="textarea"
                rows="3"
                maxlength="254"
                show-word-limit
                style="width: 420px;"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        取消
      </el-button>
      <el-button type="primary" @click="success">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { returnConfirm, backComplain } from '@/api'
  export default {
    name: 'chargebackDialog',
    props: {
      type: {
        type: String,
        default: () => { return '' }
      }
    },
    data() {
      return {
        visible: false,
        rolePower: false,
        query: {
          userName: '',
          date: '',
          remark: ''
        },
        currentRow: {},
        formRules: {
          remark: [
            { required: true, message: '退单原因不能为空', trigger: 'change' }
          ],
          userName: [
            { required: false, message: '退单人不能为空', trigger: 'change' }
          ],
          date: [
            { required: false, message: '退单日期不能为空', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
      open(val) {
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          this.$nextTick(() => {
            this.$refs['form'].resetFields()
          })
          if (val) {
            this.currentRow = val
            this.formRules.userName[0].required = this.type === 'repair'
            this.formRules.date[0].required = this.type === 'repair'
            this.query.userName = this.currentRow.userName
            this.query.userId = this.currentRow.userId
            this.query.date = new Date()
            this.query.remark = ''
          }
        })
      },
      close() {
        this.visible = false
        this.query = {
          userName: '',
          date: '',
          remark: ''
        }
      },
      success() {
        this.$refs.form.validate(async valid => {
          if (valid) {
            if (this.type === 'repair') {
              const param = {
                repairCode: this.currentRow.repairCode,
                userId: this.query.userId,
                operateDt: this.query.date,
                marker4: this.query.remark
                // corpSN: this.currentRow.corpSN
              }
              returnConfirm(param).then(res => {
                if (res.data) {
                  this.$message.success('操作成功')
                  this.$emit('chargebackSubmit')
                  this.close()
                }
              })
            } else {
              const param = {
                complainId: this.currentRow.complainId,
                remark: this.query.remark
                // corpSN: this.currentRow.corpSN
              }
              backComplain(param).then(res => {
                if (res.data) {
                  this.$message.success('操作成功')
                  this.$emit('chargebackSubmit')
                  this.close()
                }
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.el-form--inline .el-form-item {
  display: flex;
}
</style>
